<template>
    <Modal v-model:visible="isShowModal" title="模型管理" @ok="handleOk" ok-text="提交"
        cancel-text="取消" :closable="false" :loading="loading" :width="680">
        <Form :model="formState" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }" v-if="SettingModelData">
            <FormItem label="应用场景">
                <span>{{ SettingModelData.sceneJson?.name }}</span>
            </FormItem>
            <FormItem label="选择模型">
                <div class="flex flex-row items-center gap-3 mb-3" v-for="(data, index) in formState">
                    <Select v-model:value="data.modelId" style="width: 200px" placeholder="请选择状态"
                        @change="(_e, it) => handleSelectModel(index, it)">
                        <SelectOption v-for="item in modelOption" :value="item.id" :label="item.name" :key="item.id">
                            <span>{{ item.name }}</span>
                        </SelectOption>
                    </Select>
                    <Input style="width: 200px" v-model:value="data.modelName" placeholder="请输入手机号" allowClear></Input>
                    <PlusCircleOutlined class="text-xl !text-[#999]" @click="handleAddModel()" />
                    <MinusCircleOutlined v-if="formState.length > 1" class="text-xl !text-[#999]"
                        @click="handleRemove(index)" />
                    <MinusCircleOutlined v-else class="text-xl !text-[#DDD] cursor-no-drop" />
                </div>
            </FormItem>
        </Form>
    </Modal>
</template>

<script lang="ts" setup>
import { Modal, Form, Input, message, Select } from 'ant-design-vue'
import { PlusCircleOutlined, MinusCircleOutlined } from '@ant-design/icons-vue'
import { ModelApi, OpenAIChatV1ModelItem, SettingModelGroupResult, SettingModelRequest } from '@/api';
import { DefaultOptionType } from 'ant-design-vue/es/select';

const FormItem = Form.Item;
const SelectOption = Select.Option;

const emit = defineEmits(['ok']);

const isShowModal = ref(false)
const loading = ref(false)
const modelOption = ref<OpenAIChatV1ModelItem[]>()
const SettingModelData = ref<SettingModelGroupResult>();
let formParams = {
    modelId: undefined,
    modelName: '',
    scene: undefined,
    sort: 0,
}
const formState = ref<SettingModelRequest[]>([JSON.parse(JSON.stringify(formParams))])
const handleOpen = (data: SettingModelGroupResult) => {
    SettingModelData.value = data;

    if (data.items?.length) {
        let modelItems = JSON.parse(JSON.stringify(data.items));
        let item = [] as any[];
        if (modelItems && modelItems.length) {
            for (let i = 0; i < modelItems.length; i++) {
                const element = modelItems[i];
                item.push({
                    modelId: element.modelId,
                    modelName: element.modelName,
                    scene: element.scene,
                    sort: element.sort,
                })
            }
        }
        formState.value = item;
    } else {
        handleEmpty();
    }
    getAllModelOption();
    isShowModal.value = true;
}

// 获取所有模型
const getAllModelOption = async () => {
    let res = await ModelApi.modelModels();
    modelOption.value = res.data;
}

const handleSelectModel = (index: number, item: DefaultOptionType) => {
    formState.value[index].modelName = item.label;
}

const handleAddModel = () => {
    formState.value.push(JSON.parse(JSON.stringify(formParams)))
}

const handleRemove = (index: number) => {
    formState.value?.splice(index, 1)
}

const handleOk = async () => {
    loading.value = true;
    try {
        await ModelApi.modelUpdateconfig(SettingModelData.value!.scene!.toString(), formState.value)
        message.success('添加成功')
        emit('ok')
        handleClose();
    } catch (error) {
        console.log(error);

    } finally {
        loading.value = false;
    }
}

const handleEmpty = () => {
    formState.value = [JSON.parse(JSON.stringify(formParams))];
}

function handleClose() {
    isShowModal.value = false;
}
 
defineExpose({ handleOpen })
</script>